<template>
  <div class="centen">
    <div class="centen1">
      <module1 />
    </div>
    <div class="centen2">
      <module2 />
    </div>
    <div class="centen3">
      <module3 />
    </div>
    <div class="centen4">
      <module4 />
    </div>
    <div class="centen5">
      <module5 />
    </div>
  </div>
</template>

<script>
import module1 from "../trafficuidex/module1-5/module1.vue";
import module2 from "../trafficuidex/module1-5/module2.vue";
import module3 from "../trafficuidex/module1-5/module3.vue";
import module4 from "../trafficuidex/module1-5/module4.vue";
import module5 from "../trafficuidex/module1-5/module5.vue";
export default {
  components: {
    module1,
    module2,
    module3,
    module4,
    module5,
  },
};
</script>

<style lang="less" scoped>
.centen {
  width: 1400px;
  height: 640px;
   padding-top: 20px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  overflow: hidden;
}
.centen1 {
  width: 460px;
  height: 300px;

}
.centen2 {
  width: 720px;
  height: 300px;

}
.centen3{
width: 360px;
height: 280px;

}
.centen4{
  width: 360px;
height: 280px;

}
.centen5{
  width: 360px;
height: 280px;

}
</style>

